<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>添加新题</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link th:href="@{/animate.min.css}" rel="stylesheet">
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all">

</head>
<body class="layui-layout-body">

<div style="">
    <div class="layui-layout layui-layout-admin">
        <div class="layui-header">
            <div class="layui-logo" style="cursor: default;color: white">珠海xxxx教育</div>
            <ul class="layui-nav layui-layout-right">
                <li class="layui-nav-item">
                    <span style="margin-right: 20px;cursor: default;font-size: 15px">你好！<text
                            th:text="${teacher.realName}"></text>
                    </span>
                </li>
                <li
                        class="layui-nav-item">
                    <button style="cursor: pointer;border: none;color: #EF877C;background-color:
                         #23262E;"
                            onclick=window.location='/teacher/logout'><strong>退出</strong>
                    </button>
                </li>
            </ul>
        </div>
    </div>


    <div class="layui-layout layui-layout-admin">


        <div class="layui-body layui-card-body layui-card" style="position: absolute;left: 0;right: 0;top: 0;bottom: 0;overflow-y:
    hidden">
            <div style="display: flex;padding: 20px;margin-top: 50px">
                <div style="width: 100%">

                    <div class="animated slideInUp" style="padding: 20px;text-align: center;margin-bottom: 10px">
                        <span style="font-size: 30px;">发布新题页</span>
                    </div>

                    <div class="animated slideInUp">
                        <form style="margin-left: 10%" class="layui-form" id="goodsForm">

                            <div class="layui-form-item" style="text-align: center">
                                <div>
                                    <label class="layui-form-label">题干</label>
                                    <div class="layui-input-inline" style="width: 1000px">
                                        <input type="text" name="questionBody" class="layui-input"
                                               lay-verify="required">
                                    </div>
                                </div>
                            </div>

                            <div class="layui-form-item">
                                <div>
                                    <label class="layui-form-label">选项A</label>
                                    <div class="layui-input-inline" style="width: 1000px">
                                        <input type="text" name="choiceA" class="layui-input" lay-verify="required">
                                    </div>
                                </div>
                            </div>

                            <div class="layui-form-item">
                                <div>
                                    <label class="layui-form-label">选项B</label>
                                    <div class="layui-input-inline" style="width: 1000px">
                                        <input type="text" name="choiceB" class="layui-input" lay-verify="required">
                                    </div>
                                </div>
                            </div>

                            <div class="layui-form-item">
                                <div>
                                    <label class="layui-form-label">选项C</label>
                                    <div class="layui-input-inline" style="width: 1000px">
                                        <input type="text" name="choiceC" class="layui-input" lay-verify="required">
                                    </div>
                                </div>
                            </div>

                            <div class="layui-form-item">
                                <div>
                                    <label class="layui-form-label">选项D</label>
                                    <div class="layui-input-inline" style="width: 1000px">
                                        <input type="text" name="choiceD" class="layui-input" lay-verify="required">
                                    </div>
                                </div>
                            </div>

                            <div class="layui-form-item">
                                <div>
                                    <label class="layui-form-label">解析(选填)</label>
                                    <div class="layui-input-inline" style="width: 1000px">
                                        <input type="text" name="hint" class="layui-input">
                                    </div>
                                </div>
                            </div>

                            <div class="layui-form-item">
                                <label class="layui-form-label">正确项</label>
                                <div class="layui-input-block" style="width: 200px">
                                    <label>
                                        <select name="correct" lay-filter="correct" lay-verify="required">
                                            <option value="" selected="">请选择</option>
                                            <option value="A">A</option>
                                            <option value="B">B</option>
                                            <option value="C">C</option>
                                            <option value="D">D</option>
                                        </select>
                                    </label>
                                </div>
                            </div>
                            <div class="layui-form-item" style="align-items: center;">
                                <div style="text-align: left;margin-left: 10%;margin-top: 50px">
                                    <button id="commit" type="button" lay-submit class="layui-btn"
                                            lay-filter="goodsForm"
                                            style="background-color:
                            #23262E">
                                        添加
                                    </button>
                                    <button type="reset" id="reset" class="layui-btn layui-btn-primary">清空</button>
                                </div>
                            </div>
                        </form>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>


<script th:src="@{/layui/jquery-1.11.2.js}"></script>
<script th:src="@{/layui/layui.all.js}" charset="utf-8"></script>

<script>
    $(function () {

        layui.use(['element', 'form', 'table', 'layer'], function () {
            var element = layui.element;
            var form = layui.form;
            var table = layui.table;
            var layer = layui.layer;

            form.on('submit(goodsForm)', function (data) {
                let formData = new FormData(data.form);
                $.ajax({
                    url: "/teacher/add",
                    data: formData,
                    contentType: false,//默认是表单数据，要传递json字符串就写application/json，文件就用multipart/form-data(有boundary分隔符),两者都有最好是false
                    processData: false,//默认为true,会将数据转换成字符串格式上传，若传输文件则会发生错误
                    type: 'post', //ajax请求方式post,get
                    success: function (resp) { //请求成功后的回调函数
                        layer.msg(resp.msg);
                        $("#reset").trigger("click");
                    }
                });

            });

        });

    });
</script>
</body>
</html>